<template>
  <div id="options">
    <top-bar :title="title"></top-bar>
    <div class="options_box" :class="{optionsboxative:isrzlistative}">
      <div class="rz_bg">
        <p v-if="rzimg">
          <img src="@/assets/imgs/rz_bg.png" />
        </p>
        <p v-else>
          <img src="@/assets/imgs/rzsm_bg.png" />
        </p>
      </div>
      <div class="rz_list" :class="{rzlistative:isrzlistative}">
        <md-field>
          <md-input-item ref="input1" title="真实姓名" placeholder="请输入姓名" align="right" :readonly="Isreadonly" v-model="userName" maxlength="12"></md-input-item>
          <md-input-item ref="input2" @blur="codeBlur" title="身份证号" placeholder="请输入身份证号" align="right" :readonly="Isreadonly" v-model="userId" maxlength="21"></md-input-item>
        </md-field>
        <p>{{rztext}}</p>
      </div>
      <p class="rzBtn" v-show="IsBtn" @click="rzBtn">提交</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/zfcg_icon.svg';
import '@/assets/svgs/rzsb_icon.svg';
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '实名认证',
      userName: '',
      userId: '',
      Isreadonly: false,
      IsBtn: true,
      rzimg: true,
      rztext: '仅支持二代身份认证，请输入18位身份证号',
      isrzlistative: true
    };
  },
  mounted() {
    this.getUserInfo();
    // 判断是否在微信中
    if (Utils.isWeixinBroswer()) {
      this.isrzlistative = false;
    }
  },
  methods: {
    codeBlur() {
      this.keyupBtn();
    },
    getUserInfo() {
      Loading.show();
      http.post('/pakj/passenger/getUserInfo').then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          localStorage.setItem('is_identity', res.data.data.is_identity);
          if (res.data.data.is_identity === '1') {
            this.Isreadonly = true;
            this.IsBtn = false;
            this.rzimg = false;
            this.rztext = '您已通过实名身份认证，请注意账户安全，切勿泄露密码。';
            if (res.data.data.user_name.length > 2) {
              this.userName = this.startFun(res.data.data.user_name, 0, 2);
            } else {
              this.userName = this.startFun(res.data.data.user_name, 0, 1);
            }
            var code = this.startFun(decryptByDESModeEBC(res.data.data.user_identityid), 3, 2);
            this.userId = code.replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4');
          } else {
            this.Isreadonly = false;
            this.IsBtn = true;
            this.rzimg = true;
            this.rztext = '仅支持二代身份认证，请输入18位身份证号';
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    rzBtn() {
      var reg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X]|[x])$/;
      if (!this.userName) {
        Toast({
          content: '请输入真实姓名',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.userId) {
        Toast({
          content: '请输入二代18位身份证号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      var code = this.userId.replace(/\s+/g, '');
      if (!reg.test(code)) {
        Toast({
          content: '请输入正确的二代18位身份证号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let str = localStorage.getItem('USER_INFO');
      let userobj = JSON.parse(str);
      console.log(code);
      let params = {
        tk: userobj.token,
        identityID: encryptByDESModeEBC(code),
        username: this.userName
      };
      Loading.show();
      http.post('/pakj/common/identify', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          Dialog.alert({
            icon: 'zfcg_icon',
            title: '认证成功',
            content: '恭喜您，您已通过实名认证',
            confirmText: '确定',
            onConfirm: () => {
              this.getUserInfo();
            }
          });
        } else {
          console.log(res.data);
          Dialog.alert({
            icon: 'rzsb_icon',
            title: '认证失败',
            content: '实名信息不正确，请重新输入信息后进行实名认证',
            confirmText: '确定'
          });
        }
      });
    },
    keyupBtn() {
      this.userId = this.userId.replace(/\s+/g, '').replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4');
    },
    startFun(str, frontLen, endLen) {
      var len = str.length - frontLen - endLen;
      var xing = '';
      for (var i = 0; i < len; i++) {
        xing += '*';
      }
      return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#options {
  height: 100vh;
  background-color: color-primary-background;
}

.options_box {
  height: calc(100vh -20px);
  overflow: hidden;
  overflow-y: auto;
}

.optionsboxative {
  height: calc(100vh -108px);
}

.rz_bg {
  padding-top: 20px;
}

.rz_bg p img {
  width: 100%;
}

.rz_list {
  position: absolute;
  top: 350px;
  width: 94%;
  margin: 0px 3%;
}

.rzlistative {
  top: 440px;
}

.rz_list p {
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

.md-field {
  border-radius: 7px;
}

.md-input-item-control {
  padding-right: 0px;
}

.rzBtn {
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  text-align: center;
  background-color: #FF6917;
  color: #fff;
  border-radius: 10px;
  margin-top: 50vh;
  margin-left: 20px;
  margin-right: 20px;
}
</style>
